<template>
	<el-container>
		<el-header style="height: auto;justify-content: left;">
			<div class="u-flex-1">
				<sc-select-filter :data="filterData" :label-width="80" @on-change="filterChange"></sc-select-filter>
			</div>
			<div class="u-flex-1">
				<el-date-picker v-model="trendValue1" type="daterange" :disabled-date="disabledDate" range-separator="至"
					start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" />
			</div>
		</el-header>
		<el-main class="">
			<el-row v-if="type==1" :gutter="15">
				<!-- <el-col :lg="8">
				<el-card shadow="never">
					<sc-statistic title="Title" value="112893" description="Description" tips="Tips"
						groupSeparator></sc-statistic>
				</el-card>
			</el-col> -->
				<el-col :lg="4">
					<el-card shadow="never">
						<sc-statistic title="客户总数" value="112893" prefix="" groupSeparator>
						</sc-statistic>
					</el-card>
				</el-col>
				<el-col :lg="4">
					<el-card shadow="never">
						<sc-statistic title="会员到店数/占比" value="22/66" prefix="" groupSeparator>
						</sc-statistic>
					</el-card>
				</el-col>
				<el-col :lg="4">
					<el-card shadow="never">
						<sc-statistic title="回头客到店数/占比" value="22/33" prefix="" groupSeparator>
						</sc-statistic>
					</el-card>
				</el-col>
				<el-col :lg="4">
					<el-card shadow="never">
						<sc-statistic title="跨店客到店数/占比" value="32/55" prefix="" groupSeparator>
						</sc-statistic>
					</el-card>
				</el-col>
				<el-col :lg="4">
					<el-card shadow="never">
						<sc-statistic title="新客到店数/占比" value="11/25" prefix="" groupSeparator>
						</sc-statistic>
					</el-card>
				</el-col>
			</el-row>
			<div>

				<div>
					<el-card shadow="never">
						<div class="u-font-blod u-font-20 u-m-b-20">客群统计分析</div>
						<scEcharts height="300px" :option="option"></scEcharts>
					</el-card>
				</div>
			</div>
			<div>
				<div>
					<el-card shadow="never">
						<div class="u-font-blod u-font-20 u-m-b-20">顾客属性分析</div>
						<div class="u-m-b-20">
							<el-radio-group v-model="type">
								<el-radio-button label="1">所有顾客</el-radio-button>
								<el-radio-button label="2">会员</el-radio-button>
								<el-radio-button label="3">回头客</el-radio-button>
								<el-radio-button label="4">跨店客</el-radio-button>
								<el-radio-button label="5">新客</el-radio-button>
							</el-radio-group>
						</div>
						<el-row :gutter="15">
							<el-col :lg="12">
								<div class="u-flex u-m-t-40">
									<div class="u-m-r-20 j-label-width">男性</div>
									<div class="u-flex-1" style="width:80%">
										<el-progress :percentage="50" :stroke-width="20" />
									</div>
									<div class="j-label-width j-r">女性</div>
								</div>
								<div class="u-flex u-m-t-40">
									<div class="u-m-r-20 j-label-width">会员</div>
									<div class="u-flex-1" style="width:80%">
										<el-progress :percentage="50" :stroke-width="20" />
									</div>
									<div class="j-label-width j-r">非会员</div>
								</div>
								<div class="u-flex u-m-t-40">
									<div class="u-m-r-20 j-label-width">回头客</div>
									<div class="u-flex-1" style="width:80%">
										<el-progress :percentage="50" :stroke-width="20" />
									</div>
									<div class="j-label-width j-r">新客</div>
								</div>
								<div class="u-flex u-m-t-40">
									<div class="u-m-r-20 j-label-width">跨店</div>
									<div class="u-flex-1" style="width:80%">
										<el-progress :percentage="50" :stroke-width="20" />
									</div>
									<div class="j-label-width j-r">非跨店</div>
								</div>
								<!-- <scEcharts height="300px" :option="option3"></scEcharts> -->
							</el-col>
							<el-col :lg="12">
								<scEcharts height="300px" :option="option2"></scEcharts>
							</el-col>
						</el-row>
					</el-card>
				</div>
			</div>
			<div>

				<div>
					<el-card shadow="never">
						<div class="u-flex u-col-center u-row-between u-m-b-20">
							<div class="u-font-blod u-font-20">会员/回头客到店分布统计</div>
							<div class="u-flex u-col-center">
								<div class="u-m-r-20">今日</div>
								<div class="u-m-r-20">昨日</div>
								<div>
									<el-date-picker v-model="trendValue1" type="date" value-format="YYYY-MM-DD" />
								</div>
							</div>
						</div>
						<scEcharts height="300px" :option="option"></scEcharts>
					</el-card>
				</div>
			</div>
		</el-main>
	</el-container>
</template>

<script>
	import scStatistic from '@/components/scStatistic';
	import scSelectFilter from '@/components/ShowTabData'
	import scEcharts from '@/components/scEcharts';
	export default {
		name: 'statistic',
		components: {
			scStatistic,
			scSelectFilter,
			scEcharts
		},
		data() {
			return {
				trendValue1: 7.7,
				trendValue2: -18.9,
				radio2: '进店客流',
				type: '1',
				tableData: [{
					date: '0:00-0:59',
					n1: 1,
					n2: 2,
					n3: 1,
					n4: 1
				}],
				option: {
					title: {
						text: '',
						subtext: '',
					},
					grid: {
						top: '20px'
					},
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
							data: [120, 200, 150, 80, 70, 110, 130],
							type: 'bar',
							barWidth: '15px',
						},
						{
							data: [110, 180, 120, 120, 60, 90, 110],
							type: 'bar',
							barWidth: '15px',
						}
					]
				},
				option2: {
					tooltip: {
						trigger: 'item'
					},
					legend: {
						top: '5%',
						left: 'center'
					},
					series: [{
						name: 'Access From',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 40,
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: [{
								value: 0,
								name: '儿童'
							},
							{
								value: 0,
								name: '少年'
							},
							{
								value: 0,
								name: '青年'
							},
							{
								value: 0,
								name: '中年'
							},
							{
								value: 0,
								name: '老年'
							}
						]
					}]
				},
				option3: {
					tooltip: {
						trigger: 'item'
					},
					legend: {
						top: '5%',
						left: 'center'
					},
					series: [{
						name: 'Access From',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 40,
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: [{
								value: 0,
								name: '女性'
							},
							{
								value: 0,
								name: '男性'
							},
						]
					}]
				},
				filterData: [{
					title: "",
					key: "type",
					options: [{
							label: "今日",
							value: ""
						},
						{
							label: "昨日",
							value: "1"
						},
						{
							label: "近七日",
							value: "2"
						},
						{
							label: "近三十日",
							value: "3"
						},
					]
				}, ],
				params: {
					"channel": "0",
					"detail": true,
					"device": "3377e414-5607-4c42-bd3f-8a705ff301d",
					"endDate": "",
					"mode": "",
					"startDate": "",
					"store": ""
				}
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			async getData() {
				const res = await this.$API.api.people.stat.post(this.params)
				console.log(res)
			},
			filterChange(data) {
				this.$refs.table.upData(data)
			}
		}
	}
</script>

<style scoped>
	.el-card {
		margin-bottom: 15px;
	}

	.up {
		color: #F56C6C;
		margin-left: 5px;
	}

	.down {
		color: #67C23A;
		margin-left: 5px;
	}

	.j-label-width {
		width: 60px;
		text-align: right;
	}

	.j-r {
		text-align: left;
	}
</style>
